import React, { Component } from 'react'
import { Player, BigPlayButton } from 'video-react'
import RxDragDrop from './RxDragDrop'
import video_bg from 'images/login/video_bg.jpg'
import video from 'images/login/video.png'
import videoBtn from 'images/login/videoBtn.png'

import { videoUrl } from '../../url'

class Video extends Component {
  constructor() {
    super()
    this.state = {
      show: false
    }
  }
  componentDidMount() {
  }
  componentDidUpdate() {
    this.timer = setInterval(() => {
      if (!this.player) {
        clearInterval(this.timer)
        return
      }
      const { player } = this.player.getState()
      if (player.ended) {
        this.destroy()
        clearInterval(this.timer)
      }
    }, 1000)
  }
  destroy = () => {
    this.setState({
      show: false
    })
  }
  show = () => {
    if (this.state.show) {
      return
    }
    this.setState({
      show: true
    })
  }
  render() {
    return (
      <div>
        <div className='video_group'>
          <img src={video} alt="" />
          <img src={videoBtn} alt="" className='video' onClick={this.show}/>
        </div>
        {this.state.show ? <RxDragDrop
          title={'了解精禾'} 
          destroy={this.destroy} 
          position={{x: -853/2, y: -514/2}}  
        >         
          <Player ref={player => this.player = player}
            fluid={false}
            width={853}
            preload='none'
            poster={video_bg}>
            <source src={videoUrl} />
            <BigPlayButton position="center" />
          </Player>
        </RxDragDrop> : null}
      </div>  
    )
  }
}

export default Video